<template>
    <!-- search -->

    <view class="caselist">
        <view class="caseitem" v-for="(item, index) in activelist" :key="index">
            <view class="pic" @tap="toActiveDetail" :data-id="item.id">
                <image :src="item.thumb"></image>
            </view>

            <view class="title">
                <view>【{{ item.statusstr }}】 {{ item.title }}</view>
            </view>
        </view>
    </view>

    <!-- 加载更多 -->
</template>

<script>
import { Active } from '../../model/active-model.js';
var active = new Active();
export default {
    data() {
        return {
            activelist: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading();
        this.onLoadClone3389({});
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        var that = this;
        return {
            title: '招聘会',
            path: '/pages/active/index'
        };
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            var that = this;
            uni.setNavigationBarTitle({
                title: '招聘会'
            });
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
            var params = {};
            active.GetActiveList((data) => {
                that.setData({
                    activelist: data.activelist
                });
                uni.hideNavigationBarLoading(); //完成停止加载
                uni.stopPullDownRefresh();
            }, params);
        },

        toActiveDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/activedetail/index?id=' + id
            });
        }
    }
};
</script>
<style>
/* search */
/**app.wxss**/
page {
    background-size: 100% 100%;
    height: 100%;
    font-size: 32rpx;
    font-family: '微软雅黑', '方正黑体';
    color: #333;
    background-color: #f2f2f2;
}

.caselist {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    flex-wrap: wrap;
    background-color: #f2f2f2;
}

.caselist .caseitem {
    width: 700rpx;
    display: flex;

    flex-direction: column;
    margin-bottom: 18rpx;
    padding-bottom: 50rpx;
    background: #fff;
    position: relative;
}
.caselist .caseitem .pic {
    height: 400rpx;
    line-height: 400rpx;
    align-items: center;
    justify-content: center;
    display: flex;
}
.caselist .caseitem .pic image {
    width: 700rpx;
    height: 380rpx;
    border-radius: 10rpx 10rpx 0 0;
}

.caselist .caseitem .title {
    background-color: #000;

    font-size: 0.8rem;
    height: 80rpx;
    width: 700rpx;
    line-height: 80rpx;
    margin-left: 0px;
    margin-top: 0px;
    opacity: 0.7;
    text-align: center;
    position: absolute;
    top: 310rpx;
    margin-right: 0px;
    right: auto;
    align-self: center;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.caselist .caseitem .works {
    margin-left: 10rpx;
    margin-bottom: 10rpx;
}

.gobtn {
    width: 700rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    height: 60rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
}

.gobtn .goactive {
    width: 260rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 10rpx;
    text-align: center;
    color: #fff;
    font-size: 0.7rem;
    color: #33b7bc;
    border: 1px solid #33b7bc;
    margin-top: 20rpx;
}
</style>
